<template>
  <el-dialog
    v-model="dialogVisible"
    width="70%"
    :before-close="handleClose"
    style="max-height: 500px; overflow: auto"
  >
    <div>
      <div style="width: 100%; text-align: center">
        <div class="ui-input-container">
          <input
            required=""
            placeholder="文章标题/分类/作者"
            class="ui-input"
            type="text"
            v-model="keyword"
          />
          <div class="ui-input-underline"></div>
          <div class="ui-input-highlight"></div>
          <div class="ui-input-icon" @click="search">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <path
                stroke-linejoin="round"
                stroke-linecap="round"
                stroke-width="2"
                stroke="currentColor"
                d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
              ></path>
            </svg>
          </div>
        </div>
      </div>
      <div style="margin-top: 20px">
        <div style="height: 200px; width: 100%; text-align: center" v-if="loading">
          <svg class="container"><rect class="boxes"></rect></svg>
          <div>loading...</div>
        </div>
        <div v-else>
          <div v-if="empty">
            <el-empty description="description" />
          </div>
          <div v-else>
            <div
              v-for="(item, index) of contentList"
              :key="item.id"
              class="content"
              @click="choose(item.id)"
            >
              <div style="width: 20px">{{ index + 1 }}</div>
              <div v-html="titleUtil.title(item.title)" class="title"></div>
              <div style="display: flex; width: 200px">
                <div>作者&nbsp;</div>
                <div v-html="item.author"></div>
              </div>
              <div style="display: flex; width: 200px">
                <div style="font-size: 12px">分类&nbsp;&nbsp;</div>
                <div v-html="item.typeName"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { ElNotification } from 'element-plus'
import request from '@/util/request'
import store from '@/store'
import { useRouter } from 'vue-router'
import titleUtil from '@/util/titleUtil'

const dialogVisible = ref(false)
const keyword = ref('')

const contentList = ref([])
const loading = ref(false)
const empty = ref(false)

const router = useRouter()
const handleClose = () => {
  keyword.value = ''
  dialogVisible.value = false
}

const search = () => {
  if (keyword.value === '' || keyword.value.trim() === '') {
    ElNotification.warning('抱歉，没有输入关键字')
    keyword.value = ''
    return
  }
  loading.value = true
  request
    .get(`/es/search?keyword=${keyword.value}`)
    .then((res) => {
      console.log('获取成功：', res)
      contentList.value = res.data
      if (contentList.value.length <= 0) {
        empty.value = true
      }
      setTimeout(() => {
        loading.value = false
      }, 500)
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const choose = (id) => {
  // 查询文章信息
  request
    .get(`/user/blog/one?id=${id}`)
    .then((res) => {
      console.log('获取成功：', res)
      store.dispatch('setBlogItem', res.data)
      router.push('/blogdetail')
      keyword.value = ''
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const open = () => {
  dialogVisible.value = true
}

defineExpose({
  open
})
</script>

<style scoped lang="scss">
.title {
  width: 400px;
}

.content {
  display: flex;
  height: 50px;
  line-height: 50px;
  justify-content: start;
  &:hover {
    background: #eee;
    cursor: pointer;
    color: #003cff;
  }
}

.ui-input-container {
  position: relative;
  width: 80%;
}

.ui-input {
  width: 100%;
  padding: 10px 10px 10px 40px;
  font-size: 1em;
  border: none;
  border-bottom: 2px solid #929292;
  outline: none;
  background-color: transparent;
  transition: border-color 0.3s;
}

.ui-input:focus {
  border-color: #6c63ff;
}

.ui-input-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #6c63ff;
  transform: scaleX(0);
  transition: transform 0.3s;
}

.ui-input:focus + .ui-input-underline {
  transform: scaleX(1);
}

.ui-input-highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: rgba(108, 99, 255, 0.1);
  transition: width 0.3s;
}

.ui-input:focus ~ .ui-input-highlight {
  width: 100%;
}

.ui-input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  transition: color 0.3s;
}

.ui-input:focus ~ .ui-input-icon {
  color: #6c63ff;
}

.ui-input-icon svg {
  width: 20px;
  height: 20px;
}

.container {
  width: 50px;
  height: 50px;
  margin-top: 5rem;
}

.container .boxes {
  width: 50px;
  height: 50px;
  fill: none;
  stroke-width: 50px;
  stroke: #ff5733;
  stroke-dasharray: 50;
  stroke-dashoffset: 50%;
  animation: animate 2s linear infinite;
}

@keyframes animate {
  to {
    stroke-dashoffset: 250%;
  }
}
</style>